<template>
  <el-select
    v-model="selected"
    :placeholder="placehoder"
    filterable
    clearable
    @change="onchange"
  >
    <el-option
      v-for="item in items"
      :key="item.id"
      :label="item.name"
      :value="item.id"
      :value-key="item.id"
    >
      <div class="option">
        {{ item.name }}<span>{{ item.phone }}</span>
      </div>
    </el-option>
  </el-select>
</template>

<script>
import _api from "@/common/api/employee";

export default {
  props: {
    value: {
      type: Number | null,
      default: null,
    },
    placehoder: {
      type: String,
      default: "请选择员工",
    },
  },

  watch: {
    value() {
      this.selected = this.value;
    },
  },

  data() {
    return {
      items: [],
      selected: this.value,
    };
  },

  methods: {
    onchange(value) {
      this.$emit("input", value);
    },

    async getItems() {
      const result = await _api.getListAsync({
        page_size: 999,
      });

      // this.items = result.data.map((m) => ({ id: m.id, name: m.name }));
      this.items = result.data;
    },
  },

  mounted() {
    this.getItems();
  },
};
</script>

<style lang="scss" scoped>
.option {
  display: flex;
  justify-content: space-between;

  span {
    font-size: 1rem;
    color: #999;
  }
}
</style>